import React from 'react'
import {Link} from 'react-router-dom'

import './area.scss'

export interface AreaProps {
  title?: string
  titleStyle?: any
  more?: any
  className?: string
  children?: any
  style?: any
}

export default function Area(props: AreaProps) {
  return (
    <div className={"com-area" + (props.className ? " " + props.className : "")} style={{...props.style}}>
      {props.title ? <Title {...props}/> : ""}
      {props.children}
    </div>
  )
}

function Title(props: AreaProps) {
  return (
    <div className="area-head">
      <div className="head-container">
        {props.title ?
          <span
            className="left"
            style={{
              textAlign: props.more ? "left" : "center",
              ...props.titleStyle
            }}
          >
            {props.title}
          </span>
          :
          ""
        }
        {props.more ?
          <span className="right">
            <Link className="link" to={props.more.path ? props.more.path : "/404"}>
              {props.more.text}
            </Link>
          </span>
          :
          ""
        }
      </div>
    </div>
  )
}


